<template>
  <view class="finance">
    <mineNavbar :styleData="styleData" />

    <view class="scroll">
      <view class="backIMG">
        <image class="" :src="backLogo" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="" />

        <view class="logoDesc">
          <view class="balance">
            <view class="desc"> 账户余额（元） </view>
            <view class="money">
              <span class="icon">￥</span>
              <text class="moneyItm" selectable="false" space="false" decode="false">
                {{ (detailsForm && detailsForm.balance) || "-" }}
              </text>
            </view>
          </view>

          <view class="banKBtn" @click="toPath">
            <text> 银行账号 </text>
          </view>
        </view>

        <view class="dateTab">
          <view class="date">
            <text class="account"> 账户流水 </text>
            <view class="day">
              <!-- <image
                :src="dateIcon"
                mode="aspectFit|aspectFill|widthFix"
                lazy-load="false"
                binderror=""
                bindload="" />

              <picker
                mode="date"
                :value="date"
                :start="startDate"
                :end="endDate"
                @change="bindDateChange">
                <text
                  class="select"
                  selectable="false"
                  space="false"
                  decode="false">
                  日期选择
                </text>
              </picker> -->
            </view>
          </view>

          <view class="tab">
            <view :class="t.name === itemActive ? 'item' : 'item-default'" @click="handCLick(t.name, t.type)"
              v-for="t in items">{{ t.name }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 占位 -->
    <view style="height: 100rpx" />

    <noList v-if="dataList.length === 0" />

    <scroll-view v-else class="scrollView" scroll-y @scrolltolower="scrollBottom">
      <view class="list" v-for="tab in dataList">
        <view class="list-content">
          <view class="l-list">
            <view class="peo"> {{ tab.title || "-" }} </view>
            <view class="time">{{ tab.paymentTime || "-" }} </view>
          </view>

          <view class="r-list">
            <span v-if="tab.type === '2'" class="icon-">-￥</span>
            <span v-if="tab.type === '1'" class="iconAdd">+￥</span>

            <span class="numAdd">{{ tab.rechargeAmount || "-" }}</span>
          </view>
        </view>
      </view>
      <!-- <uni-load-more
        :status="status"
        :content-text="contentText"></uni-load-more> -->
    </scroll-view>
  </view>
</template>

<script>
import { getAccountLogList, getBalanceDetails } from "@/api/subPage/mine";
export default {
  components: {},
  data() {
    const currentDate = this.getDate({
      format: true,
    });
    return {
      styleData: {
        show: true,
        tabbarText: "财务管理",
      },
      backLogo: require("./image/backLogo.png"),
      dateIcon: require("./image/date.png"),
      itemActive: "全部",
      // tab
      items: [
        {
          name: "全部",
          type: "",
        },
        {
          name: "收入",
          type: "1",
        },
        {
          name: "支出",
          type: "2",
        },
      ],
      // 请求参数
      params: {
        pageSize: 10,
        pageNum: 1,
        // 操作类型 （1=支出 2=收入）
        type: "",
      },
      // 总页数
      total: 0,
      // 列表数据
      dataList: [],
      // 日期
      date: currentDate,
      // 详情数据
      detailsForm: {},

      // 节流
      loading: false,
      // 组件加载
      status: "more",

      contentText: {
        contentdown: "-",
      },
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad(options) {
    this.getList();
    this.getDetails();
  },
  onShow() { },
  onReady() { },
  computed: {
    startDate() {
      return this.getDate("start");
    },
    endDate() {
      return this.getDate("end");
    },
  },
  methods: {
    handCLick(name, type) {
      this.itemActive = name;
      this.params.type = type;
      this.getList();
    },
    async getList() {
      this.loading = true;

      // this.status = "loading";

      const { rows, code, total } = await getAccountLogList(this.params);

      if (code == 200) {
        this.loading = false;
        this.dataList = rows;
        this.total = total;
      }

      // this.status = "more";

      // 总条数
    },

    async getDetails() {
      const { data, code } = await getBalanceDetails();
      if (code === 200) this.detailsForm = data;
    },
    // 滚到底部分页
    async scrollBottom() {
      if (this.dataList.length >= this.total) return;

      if (this.loading) return;

      this.params.pageNum++;

      this.loading = true;

      // this.status = "loading";

      const { rows, code } = await getAccountLogList(this.params);

      if (code == 200) this.loading = false;

      // this.status = "more";

      this.dataList = [...this.dataList, ...rows];
    },

    // 获取时间
    getDate(type) {
      const date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();

      if (type === "start") {
        year = year - 60;
      } else if (type === "end") {
        year = year + 2;
      }
      month = month > 9 ? month : "0" + month;
      day = day > 9 ? day : "0" + day;
      return `${year}-${month}-${day}`;
    },
    bindDateChange(e) {
      console.log(e, "eee");
    },
    toPath() {
      if (this.detailsForm?.enterpriseId !== null) {
        uni.navigateTo({
          url: `/subPage/enterprise/mine/details/bank?id=${this.detailsForm.enterpriseId}`,
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.finance {
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .scroll {
    width: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .backIMG {
      position: relative;
      width: 750rpx;
      height: 340rpx;

      image {
        width: 100%;
        height: 100%;
      }

      .logoDesc {
        position: absolute;
        top: 62rpx;
        left: 0rpx;
        display: flex;
        justify-content: space-between;
        width: 100%;

        .balance {
          margin-left: 60rpx;

          .desc {
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 24rpx;
            color: #ffffff;
            letter-spacing: 0;
            opacity: 0.64;
          }

          .money {
            .icon {
              font-family: PingFangSC-Medium;
              font-weight: 500;
              font-size: 32rpx;
              color: #ffffff;
              letter-spacing: 0;
            }

            .moneyItm {
              font-family: DINAlternate-Bold;
              font-weight: 700;
              font-size: 56rpx;
              color: #ffffff;
              letter-spacing: 0;
            }
          }
        }

        .banKBtn {
          z-index: 999999;
          margin-right: 24rpx;
          width: 149rpx;
          height: 58rpx;
          background: url("http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/10/bebc20602f9340ff9b00e935e38b98e5.png");
          background-size: cover;
          text-align: center;

          text {
            line-height: 58rpx;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 24rpx;
            color: #ffffff;
            letter-spacing: 0;
          }
        }
      }

      .dateTab {
        position: absolute;
        bottom: -60rpx;
        height: 136rpx;
        border-radius: 32rpx;
        padding: 0 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .date {
          display: flex;
          justify-content: space-between;

          .account {
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 36rpx;
            color: #000000e0;
          }

          .day {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 180rpx;
            height: 64rpx;

            // background: #ffffff;
            border-radius: 32rpx;

            image {
              padding-top: 8rpx;
              width: 32rpx;
              height: 32rpx;
            }

            .select {
              font-family: PingFangSC-Medium;
              font-weight: 500;
              font-size: 24rpx;
              color: #000000a3;
              letter-spacing: 0;
            }
          }
        }

        .tab {
          width: 702rpx;
          display: flex;

          .item {
            width: 134rpx;
            height: 56rpx;
            line-height: 56rpx;
            text-align: center;
            background: #ff9e24;
            border-radius: 32rpx;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 24rpx;
            color: #ffffff;
            letter-spacing: 0;
            margin-right: 16rpx;
          }

          .item-default {
            width: 134rpx;
            height: 56rpx;
            line-height: 56rpx;
            text-align: center;
            background: #ffffff;
            border-radius: 32rpx;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 24rpx;
            color: #000000;
            opacity: 0.64;
            letter-spacing: 0;
            margin-right: 16rpx;
          }
        }
      }
    }
  }

  .scrollView {
    height: 900rpx;

    .list {
      width: 702rpx;

      padding: 0 24rpx;

      .integralTime {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000a3;
        letter-spacing: 0;
        margin-top: 32rpx;
        margin-bottom: 16rpx;
      }

      .list-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 145rpx;
        background: #ffffff;
        border-radius: 16rpx;

        .l-list {
          padding-left: 24rpx;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          font-size: 28rpx;
          color: #000000e0;
          letter-spacing: 0;

          .peo {
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 28rpx;
            color: #000000e0;
            letter-spacing: 0;
            margin-bottom: 8rpx;
          }

          .time {
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 24rpx;
            color: #00000073;
            letter-spacing: 0;
          }
        }

        .r-list {
          padding-right: 24rpx;

          .icon- {
            color: #ff9e24;
            font-size: 28rpx;
            font-face: PingFangSC;
            font-weight: 700;
            line-height: 0;
            letter-spacing: 0;
            paragraph-spacing: 0;
            text-align: left;
          }

          .iconAdd {
            color: #ff9e24;
            font-size: 28rpx;
            font-face: PingFangSC;
            font-weight: 700;
            line-height: 0;
            letter-spacing: 0;
            paragraph-spacing: 0;
            text-align: left;
          }

          .num {
            color: #317ed0;
            font-size: 36rpx;
            font-face: DINAlternate;
            font-weight: 700;
            line-height: 0;
            letter-spacing: 0;
            paragraph-spacing: 0;
            text-align: left;
          }

          .numAdd {
            color: #ff9e24;
            font-size: 36rpx;
            font-face: DINAlternate;
            font-weight: 700;
            line-height: 0;
            letter-spacing: 0;
            paragraph-spacing: 0;
            text-align: left;
          }
        }
      }
    }
  }
}
</style>
